<template>
	<view>
		<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
			<view class="added_margin">
				<uni-section title="操作票信息" type="line">
					<uni-list>
						<uni-list-item title="工作票名称" rightText="右侧文字" />
						<uni-list-item title="工作票名称" rightText="右侧文字" />
						<uni-list-item title="工作票名称" rightText="右侧文字" />
						<uni-list-item title="工作票名称" rightText="右侧文字" />
						<uni-list-item title="工作票名称" rightText="右侧文字" />
						<uni-list-item title="工作票名称" rightText="右侧文字" />
						<uni-list-item title="工作票名称" rightText="右侧文字" />
					</uni-list>
				</uni-section>
			</view>

			<view class="added_margin">
				<uni-section title="操作票记录" type="line"></uni-section>
				<u-swipe-action>
					<u-swipe-action-item @click="swipeBtnOK" :options="swipeOptions">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<view class="swipe-action_flex">
									<view class="flex_cloum">
										<view>1</view>
										<view>2</view>
									</view>
									<view class="flex_cloum">
										<view class="colorText">1</view>
										<view class="colorText">2</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
				<view class="article_background">
					<view class="article" @click="articleBtnOK">
						<u-icon name="plus" color="#a0a2a4" size="28"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="fillLogs_button">
			<button class="popup_buttom" type="submit">同意</button>
		</view>

		<u-popup :show="articleShow" @close="articleClose" @open="articleOpen">
			<view class="articleShow_style">
				<view class="swipe-action_flex">
					<view class="flex_cloum">
						<view>1</view>
						<view>2</view>
					</view>
					<view class="flex_cloum">
						<view class="colorText">1</view>
						<view class="colorText">2</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			articleShow: false,
			steps: [
				{
					title: '买家下单',
					desc: '2018-11-11'
				},
				{
					title: '卖家发货',
					desc: '2018-11-12'
				},
				{
					title: '买家签收',
					desc: '2018-11-13'
				},
				{
					title: '交易完成',
					desc: '2018-11-14'
				}
			],
			articleShow: false,
			swipeOptions: [
				{
					text: '删除',
					style: {
						backgroundColor: 'red',
						color: 'white'
					},
					icon: 'trash' // 使用 u-icon 组件中的图标名
				}
			]
		};
	},
	methods: {
		articleBtnOK() {
			this.articleShow = true;
		},
		articleClose() {
			this.articleShow = false;
		},
		articleOpen() {}
	}
};
</script>

<style scoped lang="scss">
.uni-input {
	width: 100rpx;
}

.scrollbox {
	height: calc(100vh - 200rpx);
}

.added_margin {
	padding: 20rpx 20rpx 0 20rpx;
}

.added_steps {
	background: #fff;
	margin: 20rpx 20rpx 0 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
}

.fillLogs_button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}
.fillLogs_button button {
	width: 40%;
	background-color: #2e87ff;
	color: #fff;
	border-radius: 20rpx;
	height: 80rpx;
	line-height: 80rpx;
}

.fillLogs_button button:hover {
	background-color: #2e87ff;
	box-shadow: 0px 0px 20px -18px;
}

.fillLogs_button button:active {
	transform: scale(0.95);
}

.popup_buttom {
	background-color: #2e87ff;
	color: #fff;
	width: 40%;
	margin: 10rpx aout;
}

.swipe-action_flex {
	display: flex;
	flex-direction: column;
}
.flex_cloum {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20rpx;
	padding: 0 20rpx;
}

.colorText {
	color: #a3a5a7;
}

.articleShow_style {
	height: 50vh;
	padding: 20rpx;
}

.article {
	width: 100%;
	height: 200rpx;
	border-radius: 22rpx;
	background-color: rgba(160, 162, 164, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}

.article_background {
	background: #fff;
	padding: 20rpx;
}

.status-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 92rpx;
	margin: 30rpx;
	background-color: #007aff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	flex-direction: row;
}

.u-page {
	padding: 0;
}

.u-demo-block__title {
	padding: 10px 0 2px 15px;
}

.swipe-action {
	&__content {
		padding: 25rpx 0;

		&__text {
			font-size: 15px;
			color: $u-main-color;
			padding-left: 30rpx;
		}
	}
}
</style>
